import React, { Component } from 'react'
import { connect } from 'react-redux'
import { dataset as datasetDuck } from 'ducks'
import PropTypes from 'prop-types'
import ListTable from 'components/ListTable'
import getDatasetFile from 'graphql/dataset/getDatasetFiles.graphql'
import getDatasetItemPageInfo from 'graphql/dataset/getDatasetItemPageInfo.graphql'
import Icons from 'utils/constents/icons'

const folderSrc = 'https://png.icons8.com/office/2x/folder-invoices.png'
const fileSrc = 'https://png.icons8.com/color/2x/image-file.png'

const dataOpts = [
  {
    src: Icons.VIEW,
    text: '预览',
  },
  {
    src: Icons.DELETE,
    text: '删除',
  },
]

const FileList = url => ({ data }) => (
  <React.Fragment>
    {data.dataset_item.map(file => (
      <ListTable.Row hasCheckBox>
        <ListTable.Avatar
          src={file.is_folder ? folderSrc : fileSrc}
          url={file.is_folder ? `${url}/${file.name}` : undefined}
          text={file.name}
        />
        <ListTable.Cell>{file.size}</ListTable.Cell>
        <ListTable.Cell>{file.create_at}</ListTable.Cell>
        <ListTable.Action width={2} options={dataOpts} />
      </ListTable.Row>
    ))}
  </React.Fragment>
)

export default class DatasetData extends Component {
  static propTypes = {
    setParentActiveItem: PropTypes.func.isRequired,
  }

  componentDidMount = () => {
    const { setParentActiveItem } = this.props
    setParentActiveItem('data')
  }

  render() {
    const { match, activeDatasetId, activeDataset, orgName } = this.props
    let { path } = match.params
    const baseUrl = `/dataset/${orgName}/${activeDataset}/data`
    const URL = path ? `${baseUrl}/${path}` : `${baseUrl}`
    path = path || ''
    const RenderList = FileList(URL)
    console.log(path)
    return (
      <ListTable
        nav={{
          path,
          homeText: '数据首页',
          homePath: `/dataset/${orgName}/${activeDataset}/data`,
        }}
        globalActions={[
          {
            text: '上传文件',
            url: `/dataset/${orgName}/${activeDataset}/upload/${path}`,
          },
          {
            text: '新建文件夹',
            url: path
              ? `/dataset/${orgName}/${activeDataset}/newFolder/${path}`
              : `/dataset/${orgName}/${activeDataset}/newFolder`,
          },
        ]}
        search={{ text: '搜索文件' }}
        sort
        pagination={{
          query: getDatasetItemPageInfo,
          name: 'dataset_item_aggregate',
          variables: {
            datasetId: activeDatasetId,
            path,
          },
        }}
        listData={{
          query: getDatasetFile,
          variables: {
            datasetId: activeDatasetId,
            path,
            order: [{ is_folder: 'desc' }],
            limit: 10,
          },
          header: (
            <ListTable.Header hasCheckBox>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                名称
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>文件大小</ListTable.HeaderCell>
              <ListTable.HeaderCell>更新时间</ListTable.HeaderCell>
              <ListTable.HeaderCell />
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '当前目录下没有文件',
          action: {
            text: '上传文件',
            url: '/dataset',
          },
        }}
      />
    )
  }
}
